<template>



    <el-container class="container">
        <el-header class="header">Header</el-header>
        <el-container>
            <el-aside width="200px" class="aside">

                <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                    @select="selectMenu" default-active="2" text-color="#fff">
                    <el-sub-menu index="1">
                        <template #title>
                            <span>系统管理</span>
                        </template>
                        <el-menu-item index="/home/user">用户管理</el-menu-item>
                        <el-menu-item index="/home/menu">菜单管理</el-menu-item>
                        <el-menu-item index="/home/role">角色管理</el-menu-item>
                    </el-sub-menu>

                </el-menu>






            </el-aside>
            <el-main class="main">

                <router-view></router-view>

            </el-main>
        </el-container>
    </el-container>

</template>


<script lang="ts" setup name="Home">
import { RouterView, RouterLink, useRouter } from 'vue-router'

//获取Router对象

const router = useRouter();

function selectMenu(url: string) {
    console.log("url", url);
    router.push(url)

}



</script>


<style scoped>
.container {

    width: 100vw;
    height: 100vh;
}

.header {
    background-color: #C6E2FF;
}

.aside {
    background-color: #545C64;
}

.main {
    background-color: #ECF5FF;
}

/* .menu {
    height: 100%;
    width: 300px;
    background-color: cadetblue;
}


.content {
    height: 100%;
    width: calc(100% - 300px);
    background-color: rgb(176, 188, 189);
} */
</style>
